<template>
	<view class="month-box">
		<z-paging ref="paging" v-model="dataList" @query="getReportList" :auto="false">
			<template #top>
				<view class="top-box">
					<u-search placeholder="请输入搜索关键字" v-model="keyword" :showAction="false"
						@search="$u.debounce(refreshList, 500)"></u-search>
				</view>
			</template>
			<view class="box-tabel">
				<view class="table-item" v-for="(item,index) in dataList" :key="index" @click="reportDetail(item)">
					<view class="title">
						<view>{{item.title}}</view>
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
					<view class="time">{{item.test_date}}</view>
				</view>
			</view>
			<template #bottom>
				<view class="safe-bottom">
					<button class="login-btn" @click="userLoginOut">退 出 登 录</button>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				keyword: '',
				dataList: [],
			}
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		onShow() {
			if (!this.isLogin) {
				this.$Tips({
					title: '请先登录'
				}, {
					tab: 4,
					url: '/pages/login/login'
				})
			} else {
				this.getReportList(1, 10)
			}
		},
		methods: {
			//退出登录
			userLoginOut() {
				this.$store.commit('LOGOUT')
				this.$store.commit('UPDATE_USERINFO', {})
				this.$Tips({
					title: '退出成功'
				}, {
					tab: 4,
					url: '/pages/login/login'
				})
			},
			reportDetail(item) {
				if (item.ctype == 1) {
					if(!item.pdf){
						return this.$Toast('未检测到有效地址')
					}
					//西医报告
					this.$Tips('/pages/webview/webview?src=' + item.pdf)
				} else {
					//中医报告
					if(!item.zhongyi_report){
						return this.$Toast('未检测到有效地址')
					}
					// this.$Tips('/pages/tcmReport/tcmReport?reportId=' + item.id)
					this.$Tips('/pages/webview/webview?src=' + item.zhongyi_report)
				}
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop()
					this.$refs.paging.refresh();
				}
			},
			getReportList(pageNo, pageSize) {
				this.$Api.user.getReportList({
					page: pageNo,
					limit: pageSize,
					kw: this.keyword,
					token: this.userInfo.token
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}

		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.top-box {
		padding: 20rpx;
		background: #ffffff;
	}

	.login-btn {
		margin: 20rpx;
		background: #009591;
		color: #ffffff;
	}

	.month-box {
		width: 100%;

		.box-tabel {
			margin: 20rpx;
		}

		.table-item {
			margin-bottom: 20rpx;
			box-sizing: border-box;
			background: #ffffff;
			padding: 22rpx 28rpx;
			border-radius: 10rpx;

			.title {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F8F8F8;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				font-size: 24rpx;
				color: #888888;
			}

		}
	}
</style>